﻿@page "/treemap/tooltip"

@using Syncfusion.Blazor.TreeMap
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample depicts the number of international airports in various countries in South America. In this sample we have provided the custom html element as tooltip template to render the airport count in treemap.</p>
</SampleDescription>
<ActionDescription>
    <p>We have provided equal color mapping for treemap items based on certain value. Tooltip is enabled in this example. To see the tooltip in action, hover the mouse over an item or tap an item in touch enabled devices.</p>
    <p>More information about tooltip can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/treemap/tooltip'>documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <SfTreeMap TValue="AirPortDetails" WeightValuePath="Count" EqualColorValuePath="Count" DataSource="@DataSource">
        <TreeMapTitleSettings Text="Country wise International Airport count in South America" />
        <TreeMapLeafItemSettings ShowLabels="true" LabelPath="State" Fill="6699cc" LabelPosition="LabelPosition.Center">
            <TreeMapLeafColorMappings>
                <TreeMapLeafColorMapping LeafValue="25" Color="@LeafColorOne" />
                <TreeMapLeafColorMapping LeafValue="12" Color="@LeafColorTwo" />
                <TreeMapLeafColorMapping LeafValue="9" Color="@LeafColorThree" />
                <TreeMapLeafColorMapping LeafValue="7" Color="@LeafColorFour" />
                <TreeMapLeafColorMapping LeafValue="6" Color="@LeafColorFive" />
                <TreeMapLeafColorMapping LeafValue="3" Color="@LeafColorSix" />
                <TreeMapLeafColorMapping LeafValue="2" Color="@LeafColorSeven" />
                <TreeMapLeafColorMapping LeafValue="1" Color="@LeafColorEight" />
            </TreeMapLeafColorMappings>
            <TreeMapLeafBorder Color="#FFFFFF" Width="1" />
        </TreeMapLeafItemSettings>
        <TreeMapLegendSettings Visible="true" Position="LegendPosition.Top" Shape="LegendShape.Rectangle" />
        <TreeMapTooltipSettings Visible="true">
            <TooltipTemplate>
                @{
                    var AirportCount = (context as AirPortDetails);
                    <div class="displayAirports">
                        <div class="airplaneicon">
                            <img src="images/treemap/airplane.svg" height="32" width="32" style="float:left;background-repeat:no-repeat;" />
                        </div>
                        <div class="value">
                            <span class="label">Airports:</span>
                            <b style="margin-left: -9px">@AirportCount.Count</b>
                        </div>
                    </div>
                }
            </TooltipTemplate>
        </TreeMapTooltipSettings>
    </SfTreeMap>
    <div class="urllink">
        Source:
        <a href="https://en.wikipedia.org/wiki/List_of_international_airports_by_country" target="_blank">en.wikipedia.org</a>
    </div>
</div>

<style class="cssStyles">
    .airplaneicon {
        background-image: url("styles/image/treemap/airplane.svg");
        background-repeat: no-repeat;
    }

    .displayAirports {
        border-radius: 5px;
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 6px;
        padding-top: 6px;
        background: #EFEFEF;
        height: 45px;
        width: 140px;
        border: 1px #919191;
        box-shadow: 0px, 2px;
    }

    .value {
        float:left;
        margin-top: -27px;
        color: #585C60;
        font-family: Roboto-Bold;
        font-size: 16px;
    }

    .label {
        margin-left: 26px;
        padding-left: 8px;
        color: #5D5D5D;
        font-family: Roboto-Regular;
        font-size: 16px;
    }
</style>
@code {
    public string[] LeafColorOne = new string[] { "#634D6F" };
    public string[] LeafColorTwo = new string[] { "#B34D6D" };
    public string[] LeafColorThree = new string[] { "#557C5C" };
    public string[] LeafColorFour = new string[] { "#44537F" };
    public string[] LeafColorFive = new string[] { "#637392" };
    public string[] LeafColorSix = new string[] { "#7C754D" };
    public string[] LeafColorSeven = new string[] { "#2E7A64" };
    public string[] LeafColorEight = new string[] { "#95659A" };
    public class AirPortDetails
    {
        public string Title { get; set; }
        public string State { get; set; }
        public int Count { get; set; }
    }
    public List<AirPortDetails> DataSource = new List<AirPortDetails> {
        new AirPortDetails { Title="State wise International Airport count in South America", State="Brazil", Count=25 },
        new AirPortDetails { Title="State wise International Airport count in South America", State="Colombia", Count=12 },
        new AirPortDetails { Title="State wise International Airport count in South America", State="Argentina", Count=9 },
        new AirPortDetails { Title="State wise International Airport count in South America", State="Ecuador", Count=7 },
        new AirPortDetails { Title="State wise International Airport count in South America", State="Chile", Count=6 },
        new AirPortDetails { Title="State wise International Airport count in South America", State="Peru", Count=3 },
        new AirPortDetails { Title="State wise International Airport count in South America", State="Venezuela", Count=3 },
        new AirPortDetails { Title="State wise International Airport count in South America", State="Bolivia", Count=2 },
        new AirPortDetails { Title="State wise International Airport count in South America", State="Paraguay", Count=2 },
        new AirPortDetails { Title="State wise International Airport count in South America", State="Uruguay", Count=2 },
        new AirPortDetails { Title="State wise International Airport count in South America", State="Falkland Islands", Count=1 },
        new AirPortDetails { Title="State wise International Airport count in South America", State="French Guiana", Count=1 },
        new AirPortDetails { Title="State wise International Airport count in South America", State="Guyana", Count=1 },
        new AirPortDetails { Title="State wise International Airport count in South America", State="Suriname", Count=1 },
    };
}